<template>
    <div class="main">
    <div class="container">
        <el-row type="flex" class="header">
            <el-col :span="9">
                <div class="title">
                    <a href="#">GraChen</a>
                </div>
            </el-col>
            <el-col :span="13">
                <el-row type="flex" justify="sspace-between" >
                    <el-col :span="7">
                        <!-- <el-input v-model="key" placeholder="探索" class="key"></el-input> -->
                        <input type="text" class="key" placeholder="探索">
                        <i class="el-icon-search"></i>
                    </el-col>
                    <el-col :span="4">
                        <a href="#">主页</a>
                    </el-col>
                    <el-col :span="4">
                        <a href="#">加入我们</a>
                    </el-col>
                    <el-col :span="4">
                        <a href="#">帮助中心</a>
                    </el-col>
                     <el-col :span="5">
                         <el-button type="success" round>登录/注册</el-button>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>

     <div class="container1">
        <p class="headline">GraChen</p>
        <a href="#">优质摄影交流社区<i class="el-icon-right"></i></a>
        <a href="#" class="more">more<br>
            <i class="el-icon-bottom"></i>
        </a>
    </div>
    </div>
</template>

<script>
export default {
    name:"Navg",
    data(){
        return{
            key: ""
        }
    }
}
</script>

<style scoped>
    @import "../assets/font/Sketchy.css";
    .main{
        width:100%;
        height:100vh;
        background-image: url('../assets/image/adventure.jpg');
        background-size: cover;
        overflow: hidden;
    }
    /* 第一个容器 */
    .container {
        /* position: sticky;
        top: 0; */
        margin-top: 10px;
        background-color:transparent;
    }
    .el-row{
        padding:10px;
        align-items: center;
    }
    /* 标题 */
    .title{
        text-align: center;
        font-size:26px;
        font-weight: bold;
    }
    /* 标签 */
    .el-row a{
        text-decoration:none;
        color: white;
    }
    /* 输入框 */
    .key{
        background-color:transparent;
        width:63%;
        height:30px;
        background-color: transparent;
        border:none;
        border-bottom: 1px solid white;
        color: white;
    }
    .key::placeholder{
        color: white;

    }
    .key:focus{
        outline:none;
    }
    .el-icon-search{
        display:inline-block;
        color: white;
        cursor: pointer;
        font-size:20px;
        vertical-align:middle;
        margin-left: 3px;
    }

    /* 第二个容器 */
    .container1{
        text-align:center;
        margin-top:28vh;
    }
    .container1 a{
        display:block;
        /* margin-top:20px; */
        text-decoration:none;
        font-size: 26px;
        color: white;
        padding:20px;
    }
    /* 中间标题标题 */
    .headline{
        font-family: Sketchy;
        font-size:100px;
        color: white;
    }

    /* 第三个容器 */
    .more{
        margin-top:31vh;
        font-size: 26px;
        font-weight: 900;
    }
    .el-icon-bottom{
        font-size: 30px;
    }
</style>